<template>
<div class='wrap'>

      <v-header :userName="userNameHeader"></v-header>

  <div class='detail'>
    <section @click.stop='back' class="return" style='display:inline-block'><a>返回上层</a></section>
    <section class="view">
       <div class="header">
         <span v-if='res.type == "请"'>假</span><span v-else>销</span>
         <span>{{res.name}}的{{res.type}}假申请</span>
         <span>{{res.deptname}}</span>
         <span class="right">{{params.applyId}}</span>
         <span class="right">审批编号</span>
       </div>
       <div class="content">
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>{{res.type}}假类型</span><span>{{res.leave_name}}<el-tooltip
						v-for='(k,i) in aTypeSelect'
						v-if='k.code_name == res.leave_name'
						:content='k.comment'
						popper-class='tooltip-300'
					>
					<i class="wenhao">?</i>
				</el-tooltip></span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>开始时间</span><span>{{res.start_time}}</span><span class='color-one'>{{res.Leave_st_section | ampm}}</span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>{{res.type=="销"?"实际":""}}结束时间</span><span>{{res.end_time}}</span><span class='color-one'>{{res.Leave_end_section | ampm}}</span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>请假天数</span><span>{{res.leave_day}} 天</span></div>
         <div class="reason"><span :class='{"span-width":res.type=="销"}' class='color-one'>请假事由</span><span>{{res.leave_reason}}</span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>当前步骤</span><span :class="handleColor(res.audit_status_name)">{{res.audit_status_name}}</span></div>
         <div>
           <span :class='{"span-width":res.type=="销"}' class='color-one'>附件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
           <div class="imgContainer" v-if='imgList.length'>
           	   <template v-for="(k,index) in imgList">
           	   			<img width="100px" @click="showLightBox(index)" :src='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.id+"&token="+token' alt="" />
           	   </template>
           </div>
           <a style='margin-left: 12px;' v-if='fileList.length'>
             <a 
             :href='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.id+"&token="+token'
              style='display:block' 
              class='color-third' 
              v-for='(k,i) in fileList'>
              <i :class="handleFileType(k.fileHz)"></i>
              <span>{{k.fileName}}</span>
             </a>
           </a>
           <p style='margin-left:14px' v-if='fileList.length === 0 && imgList.length === 0'>无</p>
         </div>    
       </div>

        <section class="steps">
          <div v-for='(k,i) in LogList' v-changeHeight class='steps-list'>

            <div class="date">{{k.loger_date.replace(/\//g,"-")}}&nbsp;&nbsp;&nbsp;{{k.loger_time}}</div>

            <div class="xian" :class='{ last:i == LogList.length - 1 }'>
              <span class="el-icon-circle-check" :class='{ok:k.loger_time}'></span>
            </div>

              
            <p class="people">
              <span>{{k.loger_oper}}</span>
              <span class="color-one">({{k.dept_descr}})</span>
              
            </p> 
            <div class="buzhou" :class='handleColor(k.oper_result_name)'> {{k.oper_result_name}}</div>
            <p class='message'>{{k.loger_info || ''}}</p>
            
          </div>


               
        </section>


        

    </section>
  </div>
  <light-box :selected.sync="selected" :imgUrlList="imgUrlList" :visiblable.sync="visiblable"></light-box>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Message,
  MessageBox,
  Tooltip
} from "element-ui";
import header from "@/components/employee/header";

Vue.use(Tooltip)

import lightBox from "@/components/employee/requestVacation/lightBox";

export default {
  components: {
    "v-header": header,
    'light-box': lightBox
  },
  computed: {
    res () {
      if (this.detailData) {
        if (this.detailData.busi_id.startsWith('XJ')) {
          this.detailData.type = '销'
        } else if (this.detailData.busi_id.startsWith('QJ')) {
          this.detailData.type = '请'
        }
        return this.detailData
      } else {
        return []
      }
    },
    buttonFlag () {
      if (this.status == 1) {
        return false;
      }
      return true;
    }
  },
  directives: {
    changeHeight: {
      inserted (el, binding, vnode) {
        let targetHeight, xian
        targetHeight = el.querySelector('.message').offsetHeight
        xian = el.querySelector('.xian')
        if (xian.className === 'xian') {
          xian.style.height = targetHeight + 'px'
        }
      }
    }
  },
  created () {
    let params = JSON.parse(localStorage.getItem("tab2Params"));
    this.params = params;
    this.token = localStorage.getItem("token");

    params.busi_id = params.applyId;
    this.Axios.Post(this.URL.getFileListByBusiId.url, params).then(res => {
      var resultList = res.data.datas;

      resultList.forEach((val, index, arr) => {
        if (this.handleFileType(val.fileHz) === 'img') {
          this.imgList.push(val)
          this.imgUrlList.push(this.Axios.baseURI + "/" + this.URL.downloadFile.url + "?id=" + val.id + "&token=" + this.token)
        } else {
          this.fileList.push(val)
        }
      })
    });

    this.Axios.Post(this.URL.getApprovedLogList.url, params).then(res => {
      this.LogList = res.data.datas;
    });

    this.getVacationDetail();
  },
  mounted () {
    let params = this.params;


    this.Axios.Post(this.URL.examineBydetails.url, params).then(res => {
      let resData = res.data.datas[0];

      [this.detailData, this.approvalRole, this.nextPeople] = [
        resData,
        resData.approvalRole,
        res.data.datas && res.data.datas[1] && res.data.datas[1].nextUserName
      ];
    });
  },
  data () {
    return {
      active: 2,
      type: null,
      userNameHeader: localStorage.getItem('userName'),
      status: null,
      detailData: null,
      textarea: null,
      approvalRole: null,
      fileList: [],
      token: null,
      query: null,
      LogList: [],
      nextPeople: null,

      selected: 0,
      visiblable: false,
      imgList: [],
      imgUrlList: [],

      aTypeSelect: [],
    };
  },
  filters: {
    ampm: function (value) {
      if (value == "1") {
        return "上午";
      } else if (value == "2") {
        return "下午";
      }
    }
  },

  methods: {

    showLightBox (index) {
      this.visiblable = false;
      console.log(this.visiblable, 'showLight');
      if (!index) {
        console.log(index, 'light');
        Vue.nextTick(() => {
          this.visiblable = true;
        })

      }
      this.selected = index;

    },

    getVacationDetail () {

      this.Axios
        .Post(this.URL.getLeaveInstruction.url)
        .then((res) => {
          let datas = res.data.datas
          this.aTypeSelect = datas


        })
    },




    handleColor (str) {
      switch (str) {
        case '已审批':
          return 'checking'
          break;
        case '已同意':
          return 'checking'
          break;
        case '已拒绝':
          return 'nook'
        default:
          return 'pass'
          break;
      }
    },
    handleFileType (name) {
      let type = name && name.split('.')[1]
      if (type == 'jpg' || type == 'jpeg' || type == 'png' || type == 'svg' || type == 'gif' || type == 'bmp') {
        return 'img'
      } else if (type == 'doc' || type == 'docx') {
        return 'word'
      } else if (type == 'xls' || type == 'xlsx') {
        return 'excel'
      } else {
        return 'file'
      }
    },
    back () {
      this.$router.push({ path: '/requestVacation', query: { activeName: 'b' } })

    },

    sendAjax () {
      let params = {
        examResult: this.type,
        exectionId: this.res.exectionId,
        leaveReason: this.textarea,
        leaveName: this.res.leave_name
      };

      this.Axios.Post(this.URL.examinationApply.url, params).then(res => {
        let messageType = res.data.status == 1 ? "success" : "error";

        this.status = res.data.status;

        Message({
          message: res.data.message,
          type: messageType
        });

        if (this.status == 1) this.gotoRouter();
      });
    },


    gotoRouter () {
      setTimeout(() => {
        this.$router.push({
          path: "/requestVacation",
          query: { activeName: "b" }
        });
      }, 2000);
    }
  }
};
</script>

<style lang='less' scoped>
.pass {
  color: #339966;
}

.nook {
  color: #c7254e;
}

.checking {
  color: #38f;
}
.wrap {
  background-color: rgba(0, 0, 0, 0.04);
  min-height: 100%;
  overflow-x: hidden;
}
.reason {
  overflow: hidden;
  span {
    float: left;
  }
  span:last-of-type {
    max-width: 90%;
    white-space: wrap;
    overflow: hidden;
    word-wrap: break-word;
  }
}
.detail {
  width: 80%;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 50px;

  .color-one {
    color: #999;
  }
  .color-two {
    color: #38f;
  }
  .color-third {
    color: #3c8dbc;
  }
  .return {
    color: #38f;
    cursor: pointer;
    border: 1px solid #38f;
    padding: 6px 15px;
    border-radius: 15px;
    background: #fff;
  }

  .return.select {
    color: #fff !important;
    background-color: #38f !important;
  }

  .view {
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
    padding-bottom: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
      0 1px 4px rgba(0, 0, 0, 0.117647);
    .header {
      background-color: #3c8dbc;
      padding: 10px 10px 8px 20px;
      font-size: 15px;
      > span {
        color: #fff;
        margin-left: 10px;
      }
      > span:first-of-type {
        margin-left: 0;
        color: #38f;
        background-color: #fff;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-size: 14px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
      }
      > span.right {
        float: right;
        margin-top: 1px;
      }
    }

    .content {
      padding: 16px 58px 40px 58px;
      position: relative;
      .span-width {
        width: 90px;
        display: inline-block;
      }

      a {
        cursor: pointer;
        span {
          position: relative;
          top: -4px;
        }
      }

      .word,
      .excel,
      .img,
      .file {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: no-repeat center center/ 100% 100%;
        margin: 0 8px 0 2px;
      }

      .word {
        background-image: url(../../../../static/images/word.svg);
      }

      .excel {
        background-image: url(../../../../static/images/excel.svg);
      }

      .img {
        background-image: url(../../../../static/images/img.svg);
      }

      .file {
        background-image: url(../../../../static/images/file.svg);
      }

      &::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 20px;
        background-color: #ecf0f5;
        height: 1px;
        width: 95%;
        left: 50%;
        transform: translate(-50%);
      }

      & > div {
        margin: 6px 0;
        i.wenhao {
          font-style: normal;
          background-color: #89abc6;
          color: #fff;
          display: inline-block;
          width: 14px;
          height: 14px;
          line-height: 16px;
          border-radius: 50%;
          text-align: center;
          margin-left: 3px;
          font-size: 12px;
          cursor: pointer;
        }
        & > span:nth-of-type(n + 2) {
          margin-left: 14px;
        }
      }

      & > div:last-of-type {
        overflow: hidden;
        & > p {
          float: left;
          margin-bottom: 4px;
        }

        & > a {
          float: left;
        }

        & > span {
          float: left;
        }
      }
    }

    .steps {
      padding: 0px 0 20px 16px;
      .steps-list {
        & > div,
        & > p {
          display: inline-block;
          vertical-align: top;
        }

        .date {
          min-width: 15%;
        }

        .people {
          width: 20%;
        }

        .message {
          word-wrap: break-word;
          white-space: wrap;
          max-width: 400px;
          padding-bottom: 20px;
        }

        .buzhou {
          margin-left: 30px;
          width: 8%;
        }
        .pass {
          color: #339966;
        }

        .nook {
          color: #c7254e;
        }

        .checking {
          color: #38f;
        }

        .xian {
          border-right: 1px dashed #999;
          width: 1px;
          min-height: 60px;
          margin: 0 30px;
          > span {
            transform: translateX(-50%) scale(1.3);
            background-color: #fff;
            color: #999;
          }
          > span.ok {
            color: #38f;
          }
        }

        .xian.last {
          height: 0;
          min-height: 0;
          & > span {
            top: 4px;
          }
        }
      }
    }

    .deside {
      margin: 60px 0px 20px 10px;
      text-align: left;
      > a {
        color: #38f;
        cursor: pointer;
        border: 1px solid #38f;
        padding: 6px 15px;
        border-radius: 15px;
        margin: 0 2px;
      }
    }
  }

  .text-area {
    width: 60%;
    margin: 30px 12px;
    .submit {
      margin-top: 20px;
      cursor: pointer;
    }
  }
}
</style>

<style lang='less'>
body .tooltip-300 {
  max-width: 300px;
  line-height: 25px !important;
  letter-spacing: 1px;
  font-size: 15px !important;
  background-color: #f0f9eb !important;
  color: #67c23a !important;
  padding: 15px !important;
  .popper__arrow {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
  .popper__arrow::after {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
}

.imgContainer img {
  display: inline-block;
  margin-left: 14px;
  max-height: 80px;
}
</style>